.viking-progress-bar {
  width: 100%;
  box-sizing: border-box;

  .viking-progress-bar-outer {
    border-radius: $progress-border-radius;
    background-color: $progress-bg;
    overflow: hidden;
    position: relative;
  }

  .viking-progress-bar-inner {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    border-radius: $progress-border-radius;
    line-height: 1;
    transition: $progress-bar-transition;

    .inner-text {
      color: $progress-bar-color;
      font-size: $progress-font-size;
      margin: 0 5px;
    }
  }

  @each $key, $val in $theme-colors {
    .color-#{$key} {
      background-color: #{$val};
    }
  }
}
